<template>
  <div>
    <h2 style="font-size: 30px;font-weight: bold;">修改请假申请</h2>
    <table border style="width: 800px">
      <thead></thead>
      <tbody>
        <tr>
        <td style="text-align: right;">姓名：</td>
        <td style="height: 40px;">
          <input style="width: 400px;height: 35px;" v-model="form.userName" />
        </td>
      </tr>
      <tr>
        <td style="width: 150px;text-align: right;">部门：</td>
        <td style="height: 40px;">
          <select v-model="form.sectorid" style="width: 280px;height: 30px;">
            <option v-for="item in data" :key="item.value" :label="item.label" :value="item.value" />
          </select>
        </td>
      </tr>
      <tr>
        <td style="text-align: right;">请假类型：</td>
        <td><el-radio-group v-model="form.leaveType">
        <el-radio  value="事假" name="type">事假</el-radio>
        <el-radio  value="病假" name="type">病假</el-radio>
        <el-radio  value="婚假" name="type">婚假</el-radio>
        <el-radio  value="丧假" name="type">产假</el-radio>
        <el-radio  value="工伤" name="type">工伤</el-radio>
        <el-radio  value="补休" name="type">补休</el-radio>
        <el-radio  value="其他" name="type">其他</el-radio>
      </el-radio-group></td>
      </tr>
      <tr>
        <td style="text-align: right;">请假时间：</td>
        <td style="width: 400px;height: 110px;">
          <el-date-picker v-model="add.startTime"
            type="datetime" placeholder="开始时间" format="YYYY/MM/DD HH:mm" 
            value-format="YYYY-MM-DD h:m:s a" />至
          <el-date-picker v-model="add.endTime"
            type="datetime" placeholder="结束时间" format="YYYY/MM/DD HH:mm"
            value-format="YYYY-MM-DD h:m:s a" />&nbsp;<br><br>
          共计<el-input style="width: 50px;" v-model="add.Days"/>天
          <el-input style="width: 50px;" v-model="add.Hours"/>时<br><br>

          报到时间：<el-date-picker v-model="form.reportedTime" type="datetime" 
           format="YYYY/MM/DD HH:mm"
            placeholder="报到时间" />
        </td>
      </tr>
      <tr>
        <td style="text-align: right;">请假事由：</td>
        <td style="width: 600px;height: 110px;">
          <el-input v-model="form.leaveReason" maxlength="140" style="width: 600px;height: 100px;"
          :autosize="{ minRows: 4, maxRows: 6 }" show-word-limit type="textarea" />
        </td>
      </tr>
      <tr>
        <td style="text-align: right;">部门领导：</td>
        <td style="height: 40px;" align="center">
          <span style="font-size: 20px;">{{ form.departmentHeader }}</span>
        </td>
      </tr>
      <tr style="width: 150px;height: 60px;">
        <td></td>
        <td style="text-align: center;">
           <el-button style="width: 150px;height: 40px;font-size: 20px;" type="primary"
           @click="Update">修改</el-button>
        </td>
      </tr>
      </tbody>

    </table>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import {  onMounted, reactive} from 'vue';
import { useRoute } from 'vue-router';

onMounted(()=>{
  GetLeaved()
  console.log(add);
  
})
const route=useRoute()
const form = reactive({
  leaveId:route.query.leaveId,
  userName: '',
  sectorid:'1',
  leaveTime:'',
  reportedTime:'',
  departmentHeader:'',
  leaveReason:'',
  leaveType:'',
  totaWorkTime:''
})
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const add:any=reactive({
  Days:'',
  Hours:'',
  startTime:'',
  endTime:''
})
// const startTime=ref([])
// const endTime=ref([])
 
// const GetDate:any=computed(()=>{
//   if(!add.startTime || !add.endTime){
//     return 0;
//   }
//   const start=new Date(add.startTime)
//   const end = new Date(add.endTime)
//   const diffMs=end.getTime()-start.getTime()
//   const Day=Math.floor(diffMs/(1000*60*60*8));
//   const Hour=Math.floor(diffMs% (1000*60*60*8)/(1000*60*60));
//   // eslint-disable-next-line vue/no-side-effects-in-computed-properties
//   add.Days=Day;
//   // eslint-disable-next-line vue/no-side-effects-in-computed-properties
//   add.Hours=Hour;
//   return [Day,Hour];
// })
// watch(()=>{

// })
//反填
const GetLeaved=()=>{
  axios.get('Leave/GetLeaved', {
    params: {
      id:form.leaveId
    }
  }).then((ret) => {
    console.log(ret.data)
    form.userName=ret.data.userName
    form.leaveType=ret.data.leaveType
    add.startTime=ret.data.leaveTime.substring(0,19)
    add.endTime=ret.data.leaveTime.substring(20,40)
    add.Hours=ret.data.totaWorkTime%8
    add.Days=Math.floor(ret.data.totaWorkTime/8)
    form.reportedTime=ret.data.reportedTime
    form.leaveReason=ret.data.leaveReason
    form.departmentHeader=ret.data.departmentHeader
  })
  
}
const Update=()=>{
  axios.post(`axios`,{}).then((ret) => {
    console.log(ret.data)
  })
}
//部门
const data = [{
    value: '1',
    label: 'IT信息部',
  },
  {
    value: '2',
    label: '人力资源部',
  },
  {
    value: '3',
    label: '财务部',
  }]

</script>

<style scoped>

</style>